import React from 'react';
import Viewer from 'react-viewer';
import 'react-viewer/dist/index.css';

export default class ImageViewer extends React.PureComponent {
  static defaultProps = {
    images: [],
    visible: false,
  };

  customToolbar = config => {
    const { customToolbar } = this.props;
    return customToolbar
      ? customToolbar(config)
      : [
          { key: 'prev', actionType: 3 },
          { key: 'rotateLeft', actionType: 5 },
          { key: 'reset', actionType: 7 },
          { key: 'rotateRight', actionType: 6 },
          { key: 'next', actionType: 4 },
        ];
  };

  render() {
    const { images, visible } = this.props;
    return images.length > 0 ? (
      <Viewer {...this.props} visible={visible} customToolbar={this.customToolbar} />
    ) : null;
  }
}
